<template>
  <div>
    <!--头部+banner-->
    <div class="a-1">
      <!--顶部导航-->
      <div class="a-2">
        <div class="a-3">
          <Header v-bind:state="3"></Header>
        </div>
      </div>
      <!--banner-->
      <div class="target a-9" id="target-2">
        <el-carousel class="lunbo-box-item" indicator-position="none" height="600px">
          <el-carousel-item v-for="(item,index) in abc_img" :key="index">
            <img :src="item.src" class="lunbotu" alt="轮播图" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div class="target a-9" id="target-2">
        <div>
          <div>
            <img src="@/assets/image/ny_banner2.png" />
          </div>
          <div>
            <img src="@/assets/image/ny_banner2.png" />
          </div>
          <div>
            <img src="@/assets/image/ny_banner2.png" />
          </div>
        </div>
      </div> -->
      <!--搜索-->
      <div class="a-10">
        <form class="a-11">
          <input class="a-12" v-model="searchvalue" type="text" placeholder="请输入关键字" />
          <button @click="clickSearch" type="button" class="a-13">
            <img src="@/assets/image/index-26.png" />
          </button>
        </form>
      </div>
      <!--消息通知-->
      <div class="a-14">
        <div class="a-15">
          <img class="a-16" src="@/assets/image/tz.png" />
          <div class="a-17">
            <div class="swiper-container swiper-containerOne">
              <div class="swiper-wrapper clearfix">
                <div class="swiper-slide" v-for="(item,index) in noticeList" :key="index">
                  <a href="javascipt:;">{{item.noticeContent}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--影视列表-->
    <div class="d-1">
      <div class="d-2">
        <!--路由-->
        <div class="b-8">
          <div class="b-9">
            当前位置：
            <a href="javascript:;">首页</a> >
            <a href="javascript:;">影视版权</a>
          </div>
        </div>
        <div class="a-48">
          <div class="a-49">Film and television copyright</div>
          <div class="a-50">影视版权</div>
          <img class="a-51" src="@/assets/image/index-9.png" />
        </div>
        <!--选项-->
        <!-- <div class="a-75">
          <ul class="a-22 a-74">
            <li :class="type==1?'active':''" @click="changeType(1)">形象授权</li>
            <li :class="type==2?'active':''" @click="changeType(2)">电影音像制品</li>
            <li :class="type==3?'active':''" @click="changeType(3)">服装饰品</li>
            <li :class="type==4?'active':''" @click="changeType(4)">海报玩具</li>
          </ul>
        </div> -->
        <div class="a-24 a-76 d-4">
          <!--1-->
          <div class="a-25-box a-87" v-if="type==1">
            <div class="jq22-container">
              <div class="jq22-content bgcolor-3">
                <div id="div1">
                  <div class="box" v-for="item in Videolist" :key="item.product_id">
                    <div>
                      <img :src="item.cover_image" alt />
                      <div class="a-28 d-5">
                        <span>全部转让</span>
                      </div>
                      <div class="d-6">
                        <img class="d-7" src="@/assets/image/play.png" />
                      </div>
                      <div class="d-14"></div>
                      <div class="d-8">
                        <div class="d-9">{{item.product_name}}</div>
                        <div class="d-10"></div>
                        <div class="d-11">
                          <span class="d-12">交易类型：{{item.trading_type==0?'作品挂牌':'项目挂牌'}}</span>
                          <span class="d-13">作品类型：{{item.trading_type==0?worksTypeFormat(item):projectTypeFormat(item)}}摄影</span>
                        </div>
                      </div>
                    </div>
                  </div>


                </div>
              </div>
            </div>
          </div>
          <div class="a-35 h-48">
            <mo-paging
              :page-index="currentPage"
              :total="totalPage"
              :page-size="pageSize"
              @change="pageChange"
            ></mo-paging>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import MoPaging from "@/views/Page";
  import http from "@/api/home";
  import Header from "@/views/header.vue";
  export default {
    components: {
      Header,
      MoPaging,
    },
    data() {
      return {
        abc_img: [
          { src: require("../../assets/image/banner1.png") },
          { src: require("../../assets/image/banner2.png") },
          { src: require("../../assets/image/banner3.png") },
        ],
        searchvalue:"",
        noticeList: Array,
        type: 1,
        pageSize: 5,
        totalPage: 1, //总页数
        currentPage: 1, //当前页
        worksType: null,
        projectType: null,
        Videolist: Array,
        projectTypeOptions:[], //项目分类字典
        worksTypeOptions:[], //作品分类字典
      };
    },
    methods: {
      //点击搜索
      clickSearch() {
        var _this = this;
        _this.$router.push({
          path: "/listWorks",
          query: { search: this.searchvalue },
        });
      },
      //字典
      projectTypeFormat(row){
        console.log("字典");
        console.log(row.project_type);
        return this.selectDictLabel(this.projectTypeOptions, row.project_type);
      },
      worksTypeFormat(row){
        return this.selectDictLabel(this.worksTypeOptions, row.works_type);
      },
      // 下一页
      pageChange(e) {
        this.currentPage = e;
        this.getVideo();
      },
      changeType(e) {
        this.type = e;
      },
      getVideo() {
        http
          .videoList({
            currentPage: this.currentPage,
            pagesize: this.pageSize,
            worksType: this.worksType,
            projectType: this.projectType,
          })
          .then((res) => {
            if (res.code == 200) {
              this.Videolist = res.data;
              console.log(res);
            }
          });
      },
    },
    created() {
      this.getVideo()
      this.noticeList = JSON.parse(window.sessionStorage.getItem("lb"));
    },
    name: "index",
  };
</script>

<style scoped>
  @import "../../css/index.css";
  @import "../../css/list_video.css";
  @import "../../css/idangerous.swiper.css";
</style>
